<template>
  <el-container style="height: 100vh;">
    <el-aside width="150px" style="height: 100%;">
      <el-menu default-active="6"
        class="el-menu-vertical-demo" 
        background-color="#545c64"
        text-color="#fff"
        @select="handleSelect"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">退出登录</el-menu-item>
        <el-sub-menu index="3">
          <template #title>订单</template>
          <el-menu-item index="3-1">我的订单</el-menu-item>
          <el-menu-item index="3-2">评价晒单</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="4">聊天</el-menu-item>
        <el-menu-item index="5">发布商品</el-menu-item>
        <el-menu-item index="6">管理商品</el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header class="header">
        <el-row align="middle" type="flex">
          <el-col :span="20">
            <div class="text" style="font-size: 23px;padding-left:45%;color:cadetblue;;">用户-{{ globalState.username}}-你好，欢迎进入个人中心！</div>
          </el-col>
          <el-col :span="2" :offset="2">
            <div class="avatar"></div>
          </el-col>
        </el-row>
      </el-header>

      <el-main style="background: #f6f4f4;background-image: url(/src/assets/img/grzx.jpg)">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { useRouter } from 'vue-router';
import { globalState } from '../global.js';

export default {
  name: 'UserInterface',
  setup() {
    const router = useRouter();
    // 默认跳转到商品管理界面
    router.push('/manage');
    
    const handleSelect = (index) => {
      switch(index) {
        case '1':
          router.push('/mainpage');
          break;
        case '2':
          router.push('/');
          break;
        case '3-1':
          router.push('/order/orders');
          break;
        case '3-2':
          router.push('/order/reviews');
          break;
        case '4':
          router.push('/chat');
          break;
        case '5':
          router.push('/upload');
          break;
        case '6':
          router.push('/manage');
          break;
      }
    };
    
    return {
      handleSelect,
      globalState
    };
  },
};
</script>

<style scoped>
html, body {
  height: 100%;
  margin: 0;
}
.el-container {
  height: 100vh;
}
.el-menu-vertical-demo {
  height: 100%;
}
.header {
  height: 60px; 
  padding: 0 20px;
  background: #fff; 
  border-bottom: 1px solid #e4e4e4;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f2f2f2;
  text-align: center;
  line-height: 40px;
  background-image: url(/public/favicon.ico);
  background-size: cover; 
}
.text {
  line-height: 60px; 
}
</style>